<template>
    <div class="teacher-approval">
        <h2>教师审核管理</h2>
        <el-table :data="pendingTeachers" style="width: 100%">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-tag :type="getStatusType(scope.row.teacherStatus)">
                        {{ getStatusText(scope.row.teacherStatus) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click="viewTeacherInfo(scope.row.id)"
                    >
                        查看详情
                    </el-button>
                    <el-button
                        type="success"
                        size="small"
                        @click="handleApproval(scope.row.id, 1)"
                        :disabled="scope.row.teacherStatus !== 0"
                    >
                        通过
                    </el-button>
                    <el-button
                        type="danger"
                        size="small"
                        @click="handleApproval(scope.row.id, 2)"
                        :disabled="scope.row.teacherStatus !== 0"
                    >
                        拒绝
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 教师详情对话框 -->
        <el-dialog
            v-model="dialogVisible"
            title="教师认证详情"
            width="70%"
        >
            <div v-if="currentTeacherInfo" class="teacher-info">
                <div v-if="!currentTeacherInfo.realName" class="no-info-tip">
                    <el-empty description="教师尚未提交认证资料" />
                </div>
                <template v-else>
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="真实姓名">{{ currentTeacherInfo.realName }}</el-descriptions-item>
                        <el-descriptions-item label="出生日期">{{ currentTeacherInfo.birthDate }}</el-descriptions-item>
                        <el-descriptions-item label="学历">{{ currentTeacherInfo.education }}</el-descriptions-item>
                        <el-descriptions-item label="专业">{{ currentTeacherInfo.major }}</el-descriptions-item>
                        <el-descriptions-item label="学校">{{ currentTeacherInfo.school }}</el-descriptions-item>
                        <el-descriptions-item label="所在省份">{{ currentTeacherInfo.province }}</el-descriptions-item>
                        <el-descriptions-item label="可授科目">{{ currentTeacherInfo.subjects }}</el-descriptions-item>
                        <el-descriptions-item label="详细住址">{{ currentTeacherInfo.address }}</el-descriptions-item>
                        <el-descriptions-item label="个人介绍">{{ currentTeacherInfo.introduction }}</el-descriptions-item>
                        <el-descriptions-item label="授课安排">{{ currentTeacherInfo.teachingSchedule }}</el-descriptions-item>
                    </el-descriptions>

                    <div class="document-images">
                        <div class="image-container">
                            <h4>身份证照片</h4>
                            <el-image
                                :src="currentTeacherInfo.idCardPhoto"
                                :preview-src-list="[currentTeacherInfo.idCardPhoto]"
                                fit="cover"
                            />
                        </div>
                        <div class="image-container">
                            <h4>学历证书照片</h4>
                            <el-image
                                :src="currentTeacherInfo.certificatePhoto"
                                :preview-src-list="[currentTeacherInfo.certificatePhoto]"
                                fit="cover"
                            />
                        </div>
                    </div>
                </template>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { userService } from '@/api/user.js'
import { teacherService } from '@/api/teacher.js'

const pendingTeachers = ref([])
const dialogVisible = ref(false)
const currentTeacherInfo = ref(null)

// 获取状态类型
const getStatusType = (status) => {
    switch (status) {
        case 0: return 'warning'
        case 1: return 'success'
        case 2: return 'danger'
        default: return 'info'
    }
}

// 获取状态文本
const getStatusText = (status) => {
    switch (status) {
        case 0: return '待审核'
        case 1: return '已通过'
        case 2: return '已拒绝'
        default: return '未知'
    }
}

// 获取待审核的教师列表
const getPendingTeachers = async () => {
    try {
        const response = await userService.getPendingTeachers()
        pendingTeachers.value = response.data
    } catch (error) {
        ElMessage.error('获取待审核教师列表失败')
    }
}

// 查看教师详情
const viewTeacherInfo = async (userId) => {
    try {
        const response = await teacherService.getTeacherInfoById(userId)
        currentTeacherInfo.value = response.data
        
        // 如果没有认证信息，显示提示
        if (!currentTeacherInfo.value.realName) {
            ElMessage.warning('该教师尚未提交认证资料')
        }
        
        dialogVisible.value = true
    } catch (error) {
        ElMessage.error('获取教师详情失败')
    }
}

// 处理审核
const handleApproval = async (userId, status) => {
    try {
        // 检查是否已提交认证资料
        const teacherInfo = await teacherService.getTeacherInfoById(userId)
        if (!teacherInfo.data.realName && status === 1) {
            ElMessage.warning('教师尚未提交认证资料，无法通过审核')
            return
        }

        await ElMessageBox.confirm(
            `确定要${status === 1 ? '通过' : '拒绝'}该教师的申请吗？${status === 1 ? '\n通过后该教师需要重新登录才能使用教师功能。' : ''}`,
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        
        const response = await userService.handleTeacherApproval({ userId, status })
        ElMessage.success(response.data)
        getPendingTeachers() // 刷新列表
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('操作失败')
        }
    }
}

onMounted(() => {
    getPendingTeachers()
})
</script>

<style scoped>
.teacher-approval {
    padding: 20px;
}

.teacher-info {
    margin-top: 20px;
}

.no-info-tip {
    text-align: center;
    padding: 40px 0;
}

.document-images {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.image-container {
    width: 48%;
}

.image-container h4 {
    margin-bottom: 10px;
}

.el-image {
    width: 100%;
    max-height: 300px;
}
</style> 